<template>
	<div style="width: 100%;">
		<div style="width: 100;">
				<el-link @click="hot()">返回热度管理</el-link>	
			<div style="width: 100%;"><p style="text-align: center;">添加热度图片</p></div>
		</div>
		<div style="background-color: #E1337F;height: 0.1rem;"/>
		<el-card >
		<div style="width: 100%;">
			<el-table style="width: 100%;" :data="data.types" >
				<el-table-column prop="typeid" label="类型ID"></el-table-column>
				<el-table-column label="图片">
					<template #default="car">
						<el-image style="width: 100px;height: 100px;"
							:src="$ip+`/public/shows/`+car.row.pic" />
					</template>
				</el-table-column>
				<el-table-column prop="typename" label="名称"></el-table-column>
				<el-table-column prop="breed.breedid" label="品种"></el-table-column>
				<el-table-column prop="typesn" label="类型编号"></el-table-column>
				<el-table-column label="操作">
					<template #default="h">
						<el-button style="background-color: #E1337F;" size="default" type="danger" @click.prevent="add(h.row.typeid)">
							<el-icon>
								<Plus />
							</el-icon>添加
						</el-button>
					</template>
					
				</el-table-column>
			</el-table>
			
			<div style="margin-left: 33%;">
							 <el-pagination  :total="data.page.count"  :page-count="myCeil(data.page.count/data.page.l)"
							 layout="jumper,prev,pager,next,total"  @current-change="pageQuery" /> 
						  </div>
		</div>
		</el-card >
		
	</div>
</template>

<script setup>
		import {ref, reactive,onMounted,computed,useAttrs} from"vue"
		import {$get,$postx,$postj,$postf} from '../../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import router from"../../router/index.js"
		import store from "../../store/index.js"
		import {Search,ShoppingCart,Plus} from '@element-plus/icons-vue'
		import bottom from "../../components/bottom.vue"
		import {useRoute} from "vue-router"
		import {success,warning,message,errors} from '../../store/alert.js'
		const data = reactive({
			types:[{id:""}],
			hot:[{typeid:""}],
			page:{
				p:0,
				l:5,
				count:15
			},
			
		})
	
		function pageQuery(val=1){
			// 翻页跳转
			
			let pagenum=data.page.l*val-data.page.l
			$get("/adm/hot/findTypes/"+pagenum+"/"+data.page.l).then((read)=>{
				data.types=read.data.data.type
				data.page.count=read.data.data.count
			})
			
			}
		const myCeil = (num) => {
		  return Math.ceil(num);
		};
		
		function  hot() {
			router.push("/adm/hot")
		}
		
		function add(typeid){
			$get("/adm/hot/add/"+typeid).then((read)=>{
				
				success(read.data.msg)
				router.push("/adm/hot")
			})
			
			
		}
		
		
		onMounted(()=>{
			$get("/adm/hot/findTypes/"+data.page.p+"/"+data.page.l).then((read)=>{
				data.types=read.data.data.type
				data.page.count=read.data.data.count
				data.hot=read.data.data.hot
			})
			
			
		})
		
</script>

<style>
</style>
